<template>
  <div id="app">
    <a-modal v-model="editModalState" title="编辑todo" @ok="saveTodo">
      <a-input v-model="editTodoValue" placeholder="请输入"></a-input>
    </a-modal>
    <a-card title="todoList by @FanHuaCloud">
      <a-input v-model="todo" placeholder="请输入要完成的任务"></a-input>
      <br><br>
      <a-button type="primary" @click="addTodo">添加</a-button>
      <!--      {{ selectState }}-->
      <br>
      <hr>
      筛选状态：
      <a-select style="width: 120px" v-model="selectState">
        <a-select-option value="all">
          全部
        </a-select-option>
        <a-select-option value="done">
          已完成
        </a-select-option>
        <a-select-option value="undone">
          未完成
        </a-select-option>
      </a-select>
      <a-list :data-source="filterTodoList">
        <a-list-item slot="renderItem" slot-scope="item, index">
          <a slot="actions" @click="item.done = !item.done">切换状态</a>
          <a slot="actions" @click="removeTodo(index)">删除</a>
          <a slot="actions" @click="editTodo(index)">编辑</a>
          <a-list-item-meta :description="item.done ? '完成' :'未完成'">
            <p slot="title">{{ item.todo }}</p>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </a-card>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {},
  data: function () {
    return {
      todo: "",
      editTodoValue: "",
      selectState: "all",
      selectIndex: 0,
      editModalState: false,
      todoList: [
        {
          todo: "吃饭",
          done: false,
        },
        {
          todo: "没事了",
          done: true,
        },
        {
          todo: "睡觉",
          done: false,
        },
        {
          todo: "写代码",
          done: true,
        },
      ]
    };
  },
  computed: {
    filterTodoList() {
      if (this.selectState === "done") {
        return this.todoList.filter((item) => {
          return item.done;
        });
      } else if (this.selectState === "undone") {
        return this.todoList.filter((item) => {
          return !item.done;
        })
      }
      return this.todoList;
    }
  },
  methods: {
    addTodo() {
      if (this.todo.trim() === "") {
        this.$message.warning("请输入你的任务")
        return
      }
      let addTodo = {
        todo: this.todo,
        done: false
      }
      this.todoList.push(addTodo);
      this.todo = "";
      this.$message.info("添加任务成功");
    },
    removeTodo(index) {
      this.todoList.splice(index, 1);
      this.$message.info("删除成功");
    },
    editTodo(index) {
      this.selectIndex = index;
      this.editTodoValue = this.todoList[this.selectIndex].todo;
      this.editModalState = true;
    },
    saveTodo() {
      if (this.editTodoValue.trim() === "") {
        this.$message.warning("请输入你的任务")
        return
      }
      this.todoList[this.selectIndex].todo = this.editTodoValue;
      this.editModalState = false;
      this.$message.info("编辑成功");
    }
  }
}
</script>

<style>
#app {
  padding: 10px;
}
</style>
